import { currentHandleState } from "@/store";
import { treeData } from "@/type";
import { useSnapshot } from "valtio";

const TreeItem = (props: { treeData: treeData.treeDataType["children"] }) => {
  const { treeData } = props;
  const { currentAddComponentLocation, currentAddComponentIsLeft } =
    useSnapshot(currentHandleState);
  const { location = "", key = "" } = currentAddComponentLocation as {
    location: string;
    key: string;
  };
  return (
    <div className="render-tree-branches">
      <div className="render-tree-children">
        {treeData.map((item) => {
          return (
            <div className="render-tree" key={item.key}>
              <div
                className={`render-tree-title ${
                  item.children && item.children.length ? "children" : ""
                }-${item.show ? "down" : "up"} ${
                  key === item?.key &&
                  location === item?.props?.["data-location"]
                    ? "addComponentLocation"
                    : ""
                }${currentAddComponentIsLeft ? "-top" : "-bottom"}`}
                onClick={() => {
                  console.log(item);
                }}
              >
                {item.element}
              </div>
              {item.children && item.children.length ? (
                <TreeItem treeData={item.children} />
              ) : null}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default TreeItem;
